import React, { Component, createContext } from 'react'

/*
    上下文 给后代传 递参数：
    1. 创建一个上下文对象
    const TitleContext = createContext()

    2. 使用上下文对象中的 .Provider 组件，配合 value 属性进行值的传递
    <TitleContext.Provider value={{
        title: this.state.title,
        name: '隔壁老王',
        age: 11
    }}>
        <First />
    </TitleContext.Provider>

    3.1 类组件接收
        a. 通过组件名的方式进行接收
        First.contextType = TitleContext
        b. 通过静态属性的方式接受
        static contextType = TitleContext

    3.2 函数组件接收
        a. 通过 Consumer 来接收
        <TitleContext.Consumer>
            {
                (value) => {
                    return <h1>{value.title} - {value.name} - {value.age}</h1>
                }
            }
        </TitleContext.Consumer>

        b. 通过 Hooks 
        useContext 来接收
*/

// 创建一个上下文对象
const TitleContext = createContext()

class First extends Component {
    // 2. 通过静态属性的方式来接收
    static contextType = TitleContext
    render() {
        return (
            <>
                <div>First 组件 ---- {this.context.title} - {this.context.name} - {this.context.age}</div>
                <Son />
            </>
        )
    }
}
// 1. 通过组件名的方式接收
// First.contextType = TitleContext

const Son = () => {
    return <>
        <div>Son 组件 -----  </div>

        {/* 函数式组件的接收方法 */}
        <TitleContext.Consumer>
            {
                (value) => {
                    return <h1>{value.title} - {value.name} - {value.age}</h1>
                }
            }
        </TitleContext.Consumer>

    </>
}
// 函数式组件中不能使用 Son.contextType 接收
{/* // Son.contextType = TitleContext */ }

export default class App extends Component {
    state = {
        title: '传家宝'
    }
    render() {
        return (
            <div>
                <div>App ----- {this.state.title} </div>

                <TitleContext.Provider value={{
                    title: this.state.title,
                    name: '隔壁老王',
                    age: 11
                }}>
                    <First />
                </TitleContext.Provider>



            </div>
        )
    }
}
